<template>
  <div ref="containerRef">
    <slot></slot>
    <Teleport to="body">
      <Transition
        @beforeEnter="handleBeforeEnter"
        @enter="handleEnter"
        @afterEnter="handleAfterEnter"
      >
        <div
          v-if="showMenu"
          class="context-menu"
          :style="{
            left: x + 'px',
            top: y + 'px',
          }"
        >
          <div class="menu-list">
            <div
              @click="handleClick(item)"
              class="menu-item"
              v-for="(item, i) in menu"
              :key="item.label"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </Transition>
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from "vue";
import useContextMenu from "./useContextMenu";
const props = defineProps({
  menu: {
    type: Array,
    default: () => [],
  },
});
const containerRef = ref(null);
const emit = defineEmits(["select"]);
const { x, y, showMenu } = useContextMenu(containerRef);

function handleClick(item) {
  showMenu.value = false;
  emit("select", item);
}

function handleBeforeEnter(el) {
  el.style.height = 0;
}

function handleEnter(el) {
  el.style.height = "auto";
  const h = el.clientHeight;
  el.style.height = 0;
  requestAnimationFrame(() => {
    el.style.height = h + "px";
    el.style.transition = ".3s";
  });
}

function handleAfterEnter(el) {
  el.style.transition = "none";
}
</script>

<style scoped>
.context-menu {
  position: fixed;
  background: #ffffff;
  box-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.2),
    1px 1px 5px rgba(0, 0, 0, 0.2);
  min-width: 100px;
  border-radius: 2px;
  font-size: 12px;
  color: #000000;
  line-height: 1.8;
  white-space: nowrap;
  overflow: hidden;
  flex-direction: row;
  align-items: center;
}
.menu-list {
}
.menu-item {
  padding: 5px 20px;
  cursor: pointer;
  user-select: none;
}
.menu-item:hover {
  background: #e2e2e2;
}
</style>
